<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务登记</block>
		</cu-custom>
		<view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="detail-left detail-inner" style="padding: 0 30rpx">
								服务项目与服务对象不匹配，请确认以后再提交
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal2')">
							我知道了
						</button>
						<!-- <button class="cu-btn bg-blue margin-left" @tap="hideModal">提交</button> -->
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认登记</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="det_topsss_inner" style="width: 300rpx">
								<view v-if="
                    item.serviceItemIcon.mode == 'local' ||
                    item.serviceItemIcon.mode == 'sysIcon'
                  ">
									<view class="current-item-img instant-item-inner">
										<image :src="item.serviceItemIcon.picUrl" mode="" style="margin-bottom: 12rpx"></image>
										<!-- <view class="current-item-position">
											{{item.needServiceNum}}
										</view> -->
									</view>
									<view class="current-item-content" style="text-align: center">
										{{ item.serviceItemName }}
									</view>
								</view>
								<view v-if="item.serviceItemIcon.mode == 'diy'" style="font-size: 40rpx; color: #333333" :style="{
                    color: item.serviceItemIcon.fontColor,
                    background: item.serviceItemIcon.bacColor,
                  }">
									{{ item.serviceItemIcon.word }}
								</view>
							</view>

							<!-- 	<view class="detail-left detail-inner">
								<image class="detail-img" src="../../../static/img/basics/u129.png" mode=""></image>
								<text class="detail-content">{{item.serviceItemName}}</text>
							</view> -->
							<view class="detail-right detail-inner det_topsss_right">
								<view>服务对象</view>
								<view class="detail-content">
									{{ showItem.preName }}:{{ showItem.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal1')">
							取消
						</button>
						<button class="cu-btn bg-blue margin-left" @tap="realSubmit(item)">
							提交
						</button>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-sm">
			<view class="radius shadow padding-sm shadow-lg bg-white det_top">
				<view style="margin-right: 30rpx">
					<view class="current-item-img-outer" style="width: 200rpx" v-if="
              item.serviceItemIcon.mode == 'local' ||
              item.serviceItemIcon.mode == 'sysIcon'
            ">
						<view class="current-item-img">
							<image :src="item.serviceItemIcon.picUrl" mode=""></image>
						</view>
					</view>
					<view class="current-item-img-outer current-item-img-outer-img" style="width: 120rpx; height: 80rpx" v-if="item.serviceItemIcon.mode == 'diy'"
					 :style="{
              color: item.serviceItemIcon.fontColor,
              background: item.serviceItemIcon.bacColor,
            }">
						<view>{{ item.serviceItemIcon.word }}</view>
					</view>
					<view style="text-align: center; margin-top: 10rpx">{{
            item.serviceItemName
          }}</view>
				</view>
				<view class="detail-right detail-inner">
					<view>待服务对象</view>
					<view class="detail-content">
						{{ item.needServiceNum }}
					</view>
				</view>
			</view>
		</view>
		<!-- tab -->
		<view>
			<view class="tab-outer">
				<view class="tab" @click="changeTab(index)" :class="{ position: index == 0 }" v-for="(item, index) in tabList" :key="index">
					<view class="tab-item" :class="{ tabchange: tabindex == index }">
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<template v-if="tabindex == 0">
			<view class="" style="margin-bottom: 10rpx">
				<view class="padding-sm shadow-lg bg-white det_topbottom">
					<view style="margin-bottom: 2rpx">
						<!-- 复选框 -->
						<view class="goods" v-if="item.useItem">
							<label @click="changeValue()">
								<checkbox style="transform: scale(0.7)" class="blue" :class="value ? 'checked' : ''" :checked="value" /><text>需要使用物品</text>
							</label>
							<block v-if="value">
								<input placeholder="物品" class="left" v-model="item.useItem" type="text" />
								<input class="right" placeholder="物品" v-model="item.useNum" type="number" v-if="item.useNum != undefined" />
								<input class="right" v-model="item.useNum" type="number" v-if="item.useNum == undefined" />
								<text>件</text>
							</block>
						</view>
					</view>
					
					
					<!-- 单选多选 -->
					<view
					  v-if="customItem.length != 0"
					  v-for="(it, indexs) in customItem"
					  :key="indexs"
					>
					  <view class="assist" v-if="it.classify == '单选'">
					    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
					    <radio-group name="" class="inner-right">
					      <view
					        class="right"
					        v-for="(radio, radioIndex) in it.option"
					        :key="radioIndex"
					      >
					        <label>
					          <radio
					            style="transform: scale(0.7)"
					            v-model="it.value"
					            :checked="it.value == radio ? true : false"
					          /><text @click="readName(radio)">{{ radio }}</text>
					        </label>
					      </view>
					    </radio-group>
					  </view>
					  <view class="assist" v-if="it.classify == '多选'">
					    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
					    <view
					      class="right"
					      v-for="(radio, radioIndex) in it.value"
					      :key="radioIndex"
					    >
					      <label @click="radio.checked = !radio.checked" class="inner-right">
					        <checkbox
					          class="blue"
					          style="transform: scale(0.7)"
					          :class="radio.checked ? 'checked' : ''"
					          :checked="radio.checked ? true : false"
					          v-model="radio.value"
					        /><text @click="readName(radio.label)">{{ radio.label }}</text>
					      </label>
					    </view>
					  </view>
					  <view
					    class="textarea"
					    v-if="it.classify == '文字输入'"
					    style="display: flex"
					  >
					    <view class="inner"  @click="readName(it.title)">{{ it.title }}：</view>
					    <textarea v-model="it.value" placeholder="请输入文字" class="textarea-inner"/>
					  </view>
					</view>
        </view>
      </view>
      <view class="">
        <view class="padding-sm bg-white det_top notes_outer">
          <view class="left" @click="registration"> 登记备注: </view>
          <view class="notes">
            <input
              type="text"
              v-model="item.recordRemark"
              placeholder="请输入服务登记备注内容"
              placeholder-style="font-size:28rpx"
            />
          </view>
        </view>
      </view>

      <view class="success" style="margin-top: 30rpx">
        <view class="success-left">
          <image src="../../../static/img/u35.png" mode=""></image>
        </view>
        <view class="success-right" @click="scanning">
          您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作
        </view>
      </view>
    </template>
    <template v-if="tabindex == 1">
      <view style="display: flex;background-color: #FFFFFF;">
        <view class="scroll">
          <scroll-view scroll-y="true">
            <view
              :class="{ changeColor: tabIndex == index }"
              @click="changeTabs(index, item)"
              class="scroll_inner"
              v-for="(item, index) in leftList"
              :key="index"
            >
              <view>{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>

        <!-- 老人 -->
        <view class="scroll_rig" v-if="serviceTarget == 0">
          <view
            class="scroll_rig_inner"
            @click="gotoDetal(item)"
            v-for="(item, index) in rightList"
            :key="index"
          >
            <view class="person_img">
              <image src="../../../static/img/basics/u129.png" mode=""></image>
            </view>
            <view class="person_rig">
              <view class="person_tp">
                <view class="person_tp_tp">
                  <view class="person_left">
                    {{ item.bedName }}
                  </view>
                </view>
                <view class="person_bt">
                  <view>{{ item.oldManName }}</view>
                  <view class="cu-tag round bg-orange">{{
                    item.abilityLevel
                  }}</view>
                  <view class="cu-tag round bg-blue" v-if="item.outStatus == 0"
                    >外出</view
                  >
                </view>
              </view>
              <!-- 	<view class="person_icon">
									<text class="lg text-gray cuIcon-right" ></text> 
								</view> -->
            </view>
          </view>
        </view>

        <!--房</view>间 -->
        <view class="scroll_rig" v-if="serviceTarget == 1">
          <view class="scroll_rig" style="height: 65vh">
            <scroll-view scroll-y="true" style="height: 65vh">
              <view
                v-for="(item, index) in rightList"
                :key="index"
                class="scroll_rig_inner"
                @click="gotodeatil(item)"
              >
                <view class="person_img">
                  <image
                    src="../../../static/img/basics/u609.png"
                    mode=""
                  ></image>
                </view>
                <view class="person_rig">
                  <view class="person_tp">
                    <view>
                      {{ item.roomName }}
                    </view>
                    <view class="person_bt" style="flex-direction: column">
                      <view>
                        <text class="right">昨日累计:</text>
                        <text>{{ item.yesterdayCheckCount }}次</text>
                      </view>
                      <view>
                        <text class="right">本月累计:</text>
                        <text>{{ item.curMonthCheckCount }}次</text>
                      </view>
                    </view>
                  </view>
                  <!-- <view class="person_icon">
										<text class="lg text-gray cuIcon-right" ></text> 
									</view> -->
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
        <!-- 区域 -->
        <view class="right-list-item-outer" v-if="serviceTarget == 2">
          <view
            class="right-list-item"
            v-for="(item, indexs) in rightList"
            :key="indexs"
			 @click="gotodeatil(item)"
          >
            <view class="left">
              {{ item.name }}
            </view>
          </view>
        </view>

        <!-- 	
				</view> -->
      </view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabindex: 0,//tab
      value: true,//input显示
      serviceTarget: "",//类型
      tabList: ["服务登记", "服务对象"],//顶部tab
      tabIndex: 0,//左侧tabs
      item: {},//传递
      modalName: "",//显示不同
      customItem: [],//传递
      leftList: [], //左侧
      rightList: [], //右侧
      serviceCycle: "",//不同的时间
      pageItem: {}, //本业调用接口，
      showItem: {},//后台传递的object
      timeRange: "",//时间
      //展示
	  fwName:''//服務的人
    };
  },
  onShow() {},
  onLoad(options) {
    this.item = JSON.parse(options.item);
    this.item.recordRemark = "";
    this.customItem = JSON.parse(this.item.customItem);
	console.log(this.item.customItem,99999)
	
    this.item.teamId = uni.getStorageSync("teamId");
    this.serviceTarget = this.item.serviceTarget;
    console.log(this.serviceTarget);
    if (this.item.useNum == undefined) {
      this.item.useNum = 1;
    }
    this.serviceCycle = options.serviceCycle;
    this.getContent();
    this.getObjectLeftListByServiceItem();

    const that = this;
    uni.$on("NFC_READ", function (msg) {
      that.readCard(msg.rfid);
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off("NFC_READ");
  },
  
  onHide() {},
  methods: {
	  readName(name){
	  		  if(this.$store.state.state&&this.$store.state.isphone){
	  		  	getApp().globalData.TTSSpeaker.stop();
	  		  	getApp().globalData.TTSSpeaker.speak(name,1);
	  		  }	
	  },
    readCard(id) {
      // ?serviceCycle=1&serviceItemId=202011130000011&teamId=202010280000001&rfidCardId=791aecf6
      let param = {
        serviceCycle: this.serviceCycle,
        serviceItemId: this.item.id,
        teamId: uni.getStorageSync("teamId"),
        rfidCardId: id,
      };
      this.$http(
        "/care-service/service/getByRfidCardIdForService",
        "get",
        param
      ).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          console.log(res);
          if (data == undefined) {
            uni.showToast({
              icon: "none",
              title: "这是个空标签",
            });
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('这是个空标签',1);
			}
          } else if (data.serviceTarget == this.serviceTarget) {
            this.showItem = res.data.data.serviceObject;
			this.fwName = this.showItem.name
            this.item.areaSiteId = this.showItem.id;
            this.timeRange = this.showItem.timeRange;
            // this.showModal("DialogModal1");
			this.realSubmit(this.item);
          } else if (data.serviceTarget != this.serviceTarget) {
				uni.showToast({
				    title: '服务项目与服务对象不匹配',
					icon:'none',
				    duration: 1500,
				});
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak('服务项目与服务对象不匹配',1);
				}
          }
        }
      });
    },
	
	scanning(){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作',1);
		}	
	},
	registration(){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('登记备注',1);
		}	
	},
	gotodeatil(item){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak(item.name,1);
		}	
	},
	gotoDetal(item){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('床位'+item.bedName+'姓名'+item.oldManName+'能力登记'+item.abilityLevel,1);
		}	
	},
    // POST /serviceItem/getContent
    // app获取服务项目详内容
    getContent() {
      let param = {};
      param.idList = [];
      param.idList.push(this.item.id);
      this.$http("/care-service/serviceItem/getContent", "post", param).then(
        (res) => {
          if (res.data.code == 200) {
          }
        }
      );
    },
    realSubmit(item) {
      var _that = this;
      switch (this.serviceTarget) {
        case "0":
          let oldServiceRecordQueryList = [
            {
              customItem: _that.item.customItem,
              employeeId: uni.getStorageSync("employeeId"),
              oldBaseId: this.item.areaSiteId,
              recordRemark: _that.item.recordRemark,
              serviceCycle: _that.serviceCycle,
              serviceItemId: _that.item.id,
              teamId: uni.getStorageSync("teamId"),
              timeRange: _that.timeRange,
              useItem: _that.item.useItem,
              useNum: _that.item.useNum,
            },
          ];
          let params = {
            oldServiceRecordQueryList,
          };
          params = JSON.stringify(params);
          this.$http(
            "/care-service/oldServiceRecord/save",
            "post",
            params
          ).then((res) => {
            if (res.data.code == 200) {
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('刷卡提交成功',1);
					}
								uni.showToast({
								    title: "刷卡提交成功",
								    duration: 1500,
								  	icon:'none'
								  });
								 setTimeout(function(){
								 	uni.switchTab({
								 	    url: '/pages/basics/index'
								 	});
								 },1500)
            } else {
			  if(this.$store.state.state&&this.$store.state.isphone){
			  	getApp().globalData.TTSSpeaker.stop();
			  	getApp().globalData.TTSSpeaker.speak('提交失败',1);
			  }else{
			  		uni.showToast({
						title: "提交失败",
			  		  duration: 2000,
			  			icon:'none'
			  		 });
			  }	
            }
          });
          break;
        case "1":
          break;
        case "2":
          let ss = [
            {
              serviceItemId: _that.item.id,
              customItem: _that.item.customItem,
              useItem: _that.item.useItem,
              useNum: _that.item.useNum,
              serviceCycle: _that.serviceCycle,
              timeRange: _that.timeRange,
            },
          ];
          let param = {
            teamId: uni.getStorageSync("teamId"),
            areaSiteId: _that.item.areaSiteId,
            recordRemark: _that.item.recordRemark,
            serviceRecordList: ss,
          };
          console.log(param, "提交");
          // POST /areaService/saveImmediateService
          this.$http(
            "/care-service/areaService/saveImmediateService",
            "post",
            param
          ).then((res) => {
            if (res.data.code == 200) {
              this.hideModal("DialogModal1");
            	if(this.$store.state.state&&this.$store.state.isphone){
            		getApp().globalData.TTSSpeaker.stop();
            		// getApp().globalData.TTSSpeaker.speak('您已完成'+this.fwName+'长者的提交。',1);
            		uni.switchTab({
            				url:'/pages/service/index'
            				})
            		
            	}else{
            		 uni.showToast({
            			 title: "提交成功",
            			duration: 2000,
            				icon:'none'
            			});
            			 uni.switchTab({
            						  	url:'/pages/service/index'
            			 })
            	}
            
            } else {
              this.hideModal("DialogModal1");
              if(this.$store.state.state&&this.$store.state.isphone){
              	getApp().globalData.TTSSpeaker.stop();
              	getApp().globalData.TTSSpeaker.speak('提交失败',1);
              }else{
              		uni.showToast({
              	  title: "提交失败",
              		  duration: 2000,
              			icon:'none'
              		 });
              }	
            }
          });
          break;
      }
    },
    // 左右tab切换
    changeTab(index) {
      this.tabindex = index;
	  switch(index){
		  case 0:
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('服务对象',1);
			}	
		  break;
		  case 1:
		  if(this.$store.state.state&&this.$store.state.isphone){
		  	getApp().globalData.TTSSpeaker.stop();
		  	getApp().globalData.TTSSpeaker.speak('服务登记',1);
		  }	
		  break;
	  }
    },
    // GET //getObjectLeftListByServiceItem
    // 获取待服务对象左侧列表(传serviceCycle,teamId,'serviceItemId'
    getObjectLeftListByServiceItem() {
      let param = {};
      param.serviceCycle = this.serviceCycle;
      param.teamId = uni.getStorageSync("teamId");
      param.serviceItemId = this.item.id;
      this.$http(
        "/care-service/service/getObjectLeftListByServiceItem",
        "get",
        param
      ).then((res) => {
        if (res.data.code == 200) {
          this.getObjectRightListByServiceItem(res.data.data[0].id);
          this.leftList = res.data.data;
          this.serviceTarget = this.leftList[0].serviceTarget;
        }
      });
    },
    changeValue() {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('需要使用的物品',1);
		}
      this.value = !this.value;
      if (!this.value) {
        this.item.useItem = "";
        this.item.useNum = "";
      }
    },
    // GET /service/getObjectRightListByServiceItem
    // 获取待服务对象右侧列表(传serviceCycle,teamId,'serviceItemId',preId)
    getObjectRightListByServiceItem(preId) {
      let param = {};
      param.serviceCycle = this.serviceCycle;
      param.teamId = uni.getStorageSync("teamId");
      param.serviceItemId = this.item.id;
      param.preId = preId;
      this.$http(
        "/care-service/service/getObjectRightListByServiceItem",
        "get",
        param
      ).then((res) => {
        if (res.data.code == 200) {
          this.rightList = res.data.data;
          // this.getObjectRightListByServiceItem[this.leftList[0].id]
        }
      });
    },
    showModal(item) {
      this.modalName = item;
      if (item == "DialogModal1") {
      } else if (item == "DialogModal2") {
      }
    },
    hideModal(e) {
      this.modalName = null;
    },
    changeTabs(index, item) {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak(item.name,1);
		}	
      this.serviceTarget = this.item.serviceTarget;
      this.tabIndex = index;
      this.getObjectRightListByServiceItem(item.id);
    },
  },
};
</script>

<style scoped lang="scss">
page {
  background-color: #ffffff;
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}

.detail {
  display: flex;
  align-items: center;
  .detail-img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 70rpx;
  }
  font-size: 34rpx;
  color: #333333;
}

.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 70rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}

.det_top {
  font-size: 34rpx;
  display: flex;
  .detail-content {
    margin-top: 30rpx;
  }
  .detail-inner {
    flex: 1;
  }
  .detail-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .detail-img {
      width: 70rpx;
      height: 70rpx;
    }
  }
  .detail-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #aaaaaa;
  }
}
.det_topbottom{
	font-size: 34rpx;
	.detail-content {
	  margin-top: 30rpx;
	}
	.detail-inner {
	  flex: 1;
	}
	.detail-left {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  .detail-img {
	    width: 70rpx;
	    height: 70rpx;
	  }
	}
	.detail-right {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  border-left: 1rpx solid #aaaaaa;
	}
}


.tab-outer {
  box-sizing: border-box;
  padding-bottom: 30rpx;
  display: flex;
  height: 110rpx;
  align-items: center;
  background-color: #ffffff;
  .position {
    display: flex;
    justify-content: flex-end;
    margin-right: 30rpx;
  }
  .tab {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    .tab-item {
      width: 40%;
      display: flex;
      justify-content: center;
      height: 100%;
      align-items: center;
      border-bottom: 10rpx solid #ffffff;
    }
    .tabchange {
      color: #faad14;
      border-bottom: 10rpx solid #faad14;
      font-weight: 700;
    }
  }
}
.current-item-img-outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

page {
  background-color: #ffffff;
}
.scroll_inner {
  width: 200rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll {
  background-color: #f2f2f2;
  height: 65vh;
}
.changeColor {
  background-color: #ffffff;
}
.scroll_rig {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20rpx;
  height: 160rpx;
  width: 100%;
  background-color: #FFFFFF;
  .person_img {
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .person_rig {
    margin-left: 20rpx;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #dddddd;
  }
  .person_bt {
    display: flex;

    align-items: center;
  }
  .person_tp {
    height: 100%;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.person_icon {
  text {
    font-size: 40rpx;
  }
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
.scroll_rig_inner {
  padding: 20rpx 0;
  display: flex;
  width: 100%;
}
.current-item-img-outer-img {
  border-radius: 12rpx;
}
.current-item-img {
  position: relative;
  image {
    width: 100rpx;
    height: 100rpx;
  }
  .current-item-position {
    width: 32rpx;
    height: 32rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: red;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -10rpx;
    top: -10rpx;
  }
}

.right-list-item-outer {
  background-color: #ffffff;
  flex: 1;
  padding: 20rpx;
}
.right-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  width: 100%;
  padding-left: 30rpx;
  border-bottom: 1rpx solid #cccccc;
  .cuIcon-right {
    font-size: 34rpx;
  }
  .center {
    width: 32rpx;
    height: 32rpx;
    background-color: red;
    align-items: center;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 26rpx;
    border-radius: 100%;
  }
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
page {
  background-color: #f2f2f2;
}

.detail {
  display: flex;
  align-items: center;
  .detail-img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 70rpx;
  }
  font-size: 34rpx;
  color: #333333;
}

.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 100rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
		  margin: 30rpx 0;
		  display: flex;
		  align-items: center;
		  .inner{
		  }
		  .right {
		    flex: 1;
		  }
		  .inner-right{
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}

.det_topsss {
  font-size: 34rpx;
  .detail-content {
    margin-top: 30rpx;
  }
  display: flex;
  .detail-inner {
    flex: 1;
  }
  .detail-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .detail-img {
      width: 70rpx;
      height: 70rpx;
    }
  }
  .detail-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #aaaaaa;
  }
  .detail-img {
    width: 60rpx;
    height: 60rpx;
  }
}
.textarea {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  textarea {
    border: 1rpx solid #cccccc;
    border-radius: 5rpx;
    padding: 20rpx;
  }
}
.success {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  .success-left {
    margin-right: 30rpx;
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
.person_img image {
  width: 100rpx;
  height: 100rpx;
}
.scroll_rig {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20rpx;
  height: 160rpx;
  width: 100%;
  .person_img {
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .person_rig {
    margin-left: 20rpx;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #dddddd;
  }
  .person_bt {
    display: flex;
    align-items: center;
  }
  .person_tp {
    height: 100%;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.person_icon {
  text {
    font-size: 40rpx;
  }
}
.person_icon {
  text {
    font-size: 40rpx;
  }
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
.scroll_rig_inner {
  padding: 20rpx 0;
  display: flex;
}
.scroll_inner {
  width: 200rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
